/** 报名 */
import React, {useState, useEffect} from 'react'
import {
  Form,
  Row,
  Col,
  Input,
  DatePicker,
  Tag,
  Button,
  Space
} from 'antd'
import {
  CaretUpOutlined,
  CaretDownOutlined,
  MinusCircleOutlined,
  PlusOutlined
} from  '@ant-design/icons'
const {RangePicker } = DatePicker
const {CheckableTag} = Tag

const tagsData = ['姓名', '性别', '图片', '手机号', '生日', 'QQ号', '邮箱', '学院', '年级', '班级', '学号', '特长', '备注']
export default function Apply({applyForm, getTags, requiredEntryForms}) {
  const [selectedTags, setSelectedTags] = useState([])
  const [hidden, setHidden] = useState(false)

  const  handleChange = (tag, checked) =>  {
    const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag);
    setSelectedTags([...nextSelectedTags])
    getTags(nextSelectedTags);
  }
  useEffect(()=>{
    setSelectedTags([...requiredEntryForms])
  }, [])
  return (
    <>
      <section style={{display: 'flex', justifyContent: 'space-between', marginTop: 30}}>
        <b style={{fontSize: 18}}>报名</b>
        {
          hidden
            ? <div onClick={() => setHidden(false)}
                    style={{cursor: 'pointer'}}
              >展开 <CaretUpOutlined /></div>
            : <div onClick={() => setHidden(true)}
                    style={{cursor: 'pointer'}}
              >收起 <CaretDownOutlined /></div>
        }
      </section>
      {
        hidden
          ? ''
          :    <div style={{marginTop: 20, transition: 'all 1s'}}>
          <Form
              form={applyForm}
              layout="vertical"
          >
            <Row style={{marginBottom: 20}}>
              <Col span={24}>
                  <span style={{paddingLeft: 15 , borderLeft: '5px solid #202a7d', fontSize: 16, fontWeight: 700}}>基本信息</span>
              </Col>
            </Row>
            <Row style={{background: '#f3f4f7', padding: 20}}>
              <Col span={12}>
                <Form.Item
                    label="活动时间"
                    name="activityTime"
                    rules={[{ required: true, message: '请输入日程名称' }]}
                >
                  <RangePicker showTime />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                    label="报名人数"
                    name="numberLimit"
                >
                  <Input placeholder="不填即无限制"
                      style={{width: '50%'}}
                  />
                </Form.Item>
              </Col>
            </Row>

            <Row style={{margin: '10px 0'}}>
              <Col span={24} >
                <span style={{paddingLeft: 15 , borderLeft: '5px solid #202a7d', fontSize: 16, fontWeight: 700}}>
                  选择您希望活动参加者填写的信息
                </span>
              </Col>
            </Row>
            <Row style={{background: '#f3f4f7', padding: 20}}>
              <Col span={24}>
                    {tagsData.map(tag => (
                      <CheckableTag
                          checked={selectedTags.indexOf(tag) > -1}
                          key={tag}
                          onChange={checked => handleChange(tag, checked)}
                          style={{marginRight: 10, border: '2px solid #fff'}}
                      >
                        {tag}
                      </CheckableTag>
                    ))}
              </Col>
            </Row>

            <Row style={{margin: '10px 0'}}>
              <Col span={24} >
                <span style={{paddingLeft: 15 , borderLeft: '5px solid #202a7d', fontSize: 16, fontWeight: 700}}>
                  可添加补充项目
                </span>
              </Col>
            </Row>
            <Row style={{background: '#f3f4f7', padding: 20}}>
              <Col span={24}>
                <Form.Item
                    label="项目名称"
                >
                    <Form.List name="optionalEntryForms">
                      {(fields, { add, remove }) => (
                        <>
                          {fields.map(({ key, name, ...restField }) => (
                            <Space align="baseline"
                                key={key}
                                style={{ display: 'flex', marginBottom: 8 }}
                            >
                              <Form.Item
                                  {...restField}
                                  name={[name, 'key']}
                                  rules={[{ required: true, message: 'Missing first name' }]}
                              >
                                <Input placeholder="请输入项目的名称, 如爱好"
                                    style={{width: '300%'}}
                                />
                              </Form.Item>
                              <MinusCircleOutlined onClick={() => remove(name)}
                                  style={{ marginLeft: 400 }}
                              />
                            </Space>
                          ))}
                          <Form.Item>
                            <Button block
                                icon={<PlusOutlined />}
                                onClick={() => add()}
                                style={{width: '40%'}}
                                type="dashed"
                            >
                              Add field
                            </Button>
                          </Form.Item>
                        </>
                      )}
                    </Form.List>
                </Form.Item>
              </Col>
            </Row>
          </Form>
      </div>
      }
    </>
  )
}
